<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>

</head>

<body class="ihg-theme-draft">

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <jsp:include page="/WEB-INF/include/submenu-session.jsp">
    <jsp:param name="currentUrl" value="${ctx.host}/sessions/${session.id}" />
  </jsp:include>

  <div class="container-fluid ihg-container has-ihg-sidemenu">

    <div class="ihg-breadcrumb">
      <ol class="breadcrumb border-breadcrumb">
        <li class="active">Scheduling Management</li>
      </ol>
      <div class="pull-right">
        <a href="${ctx.host}/active-sessions" style="color: #155CB2;"><<&nbsp;Go Back List</a>
      </div>
    </div>

    <div class="ihg-content-layout has-operation">
      <div class="row">
        <div class="col-xs-12">
        
          <ul class="nav nav-tabs" role="tablist" style="margin-top: 20px;">
            <li role="preparation" class="active"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation">Relation</a></li>
            <li role="preparation"><a href="${ctx.host}/sessions/${session.id}/schedulings/schedule">Schedule</a></li>
          </ul>
          
          <c:if test="${not relationTask.status.finish}">
            <div class="tab-content" style="margin-top: 25px;">

              <div class="col-xs-12 form-horizontal ihg-form" style="padding: 0px;">
                <div class="ihg-operation-bar no-margin no-bottom-border clearfix">
                  <div class="ihg-operation-group pull-right">
                    <c:if test="${not empty subSessionB}">
                      <a href="${ctx.host}/sessions/${session.id}/schedulings/relation/sub-session" class="btn btn-default btn-shadow btn-shadow-default" data-target="#sub-session" data-toggle="modal">EDIT-SUB-SESSION</a>
                    </c:if>
                  </div>
                </div>
                
                <div class="row form-horizontal ihg-form" style="padding: 0px;">
                  <div class="col-xs-${not empty subSessionB ? '6' : '12'}">
                
                    <div class="panel panel-default ihg-panel">
                      <div class="panel-heading">
                        <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;Sub Session A</span>
                      </div>
                      <div class="panel-body" style="padding: 15px 0;">
                        <c:forEach var="group" items="${subSessionA}">
                          <div class="col-xs-6">
                            <div class="panel panel-default ihg-panel">
                              <div class="panel-heading">
                                <span class="panel-titles">GROUP ${group.key}</span>
                              </div>
                              <div class="panel-body session-setting-group" style="padding: 0px;">
                                <table class="table table-bordered ihg-table-table" style="margin-bottom: 0px; text-align: center;">
                                  <tbody>
                                  
                                    <c:forEach var="participator" items="${group.value}" varStatus="status">
                                    
                                      <tr>
                                      
                                        <c:choose>
                                          <c:when test="${group.value.size() eq 4}">
                                            <c:if test="${status.count == 1 or status.count == 3}">
                                              <c:choose>
                                                <c:when test="${empty participator.assessorId}">
                                                  <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=A&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                                </c:when>
                                                <c:otherwise>
                                                  <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                                </c:otherwise>
                                              </c:choose>
                                            </c:if>
                                          </c:when>
                                          
                                          <c:when test="${group.value.size() eq 2}">
                                            <c:choose>
                                              <c:when test="${empty participator.assessorId}">
                                                <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=A&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                              </c:when>
                                              <c:otherwise>
                                                <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                              </c:otherwise>
                                            </c:choose>
                                          </c:when>
                                          
                                          <c:when test="${group.value.size() eq 3}">
                                            <c:if test="${status.count == 1}">
                                              <c:choose>
                                                <c:when test="${empty participator.assessorId}">
                                                  <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=A&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                                </c:when>
                                                <c:otherwise>
                                                  <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                                </c:otherwise>
                                              </c:choose>
                                            </c:if>
                                            <c:if test="${status.count == 3}">
                                              <c:choose>
                                                <c:when test="${empty participator.assessorId}">
                                                  <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=A&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                                </c:when>
                                                <c:otherwise>
                                                  <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                                </c:otherwise>
                                              </c:choose>
                                            </c:if>
                                          </c:when>
                                        </c:choose>
                                        
                                        <c:choose>
                                          <c:when test="${empty participator.delegateId}">
                                            <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/delegates/add?subSession=A&subGroup=${group.key}&assessorId=${participator.assessorId}&seat=${participator.delegateSeat}" class="add-btn" data-target="#delegate-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                          </c:when>
                                          <c:otherwise>
                                            <td>
                                              <a href="${ctx.host}/sessions/${session.id}/schedulings/relation/delegates/${participator.delegateId}/remove" class="close-btn" data-target="#delegate-remove" data-toggle="modal">${participator.delegateName}</a>
                                              <span style="position: absolute; top: 0; right: 0; width: 20px; height: 10px;" class="label-${persist.getKnowingRelation(session, participator.assessorId, participator.delegateId).knowingLevel.css}"></span>
                                            </td>
                                          </c:otherwise>
                                        </c:choose> 
                                        
                                      </tr>
                                    </c:forEach>
                                    
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </c:forEach>
                      </div>
                    </div>
                  </div>
                  
                  
                  
                  <c:if test="${not empty subSessionB}">
                    <div class="col-xs-6">
                      <div class="panel panel-default ihg-panel">
                        <div class="panel-heading">
                          <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;Sub Session B</span>
                        </div>
                        <div class="panel-body session-setting-group" style="padding: 15px 0;">
                          <c:forEach var="group" items="${subSessionB}">
                            <div class="col-xs-6">
                              <div class="panel panel-default ihg-panel">
                                <div class="panel-heading">
                                  <span class="panel-titles">GROUP ${group.key}</span>
                                </div>
                                <div class="panel-body session-setting-group" style="padding: 0px;">
                                  <table class="table table-bordered ihg-table-table" style="margin-bottom: 0px; text-align: center;">
                                    <tbody>
                                    
                                      <c:forEach var="participator" items="${group.value}" varStatus="status">
                                        <tr>
                                        
                                          <c:choose>
                                            <c:when test="${group.value.size() eq 4}">
                                              <c:if test="${status.count == 1 or status.count == 3}">
                                                <c:choose>
                                                  <c:when test="${empty participator.assessorId}">
                                                    <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=B&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                                  </c:when>
                                                  <c:otherwise>
                                                    <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                                  </c:otherwise>
                                                </c:choose>
                                              </c:if>
                                            </c:when>
                                            
                                            <c:when test="${group.value.size() eq 2}">
                                              <c:choose>
                                                <c:when test="${empty participator.assessorId}">
                                                  <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=B&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                                </c:when>
                                                <c:otherwise>
                                                  <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                                </c:otherwise>
                                              </c:choose>
                                            </c:when>
                                            <c:when test="${group.value.size() eq 3}">
                                              <c:if test="${status.count == 1}">
                                                <c:choose>
                                                  <c:when test="${empty participator.assessorId}">
                                                    <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=B&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                                  </c:when>
                                                  <c:otherwise>
                                                    <td rowspan="2" style="vertical-align: middle;"><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                                  </c:otherwise>
                                                </c:choose>
                                              </c:if>
                                              
                                              <c:if test="${status.count == 3}">
                                                <c:choose>
                                                  <c:when test="${empty participator.assessorId}">
                                                    <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/add?subSession=B&subGroup=${group.key}&seat=${participator.delegateSeat}" class="add-btn" data-target="#assessor-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                                  </c:when>
                                                  <c:otherwise>
                                                    <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/assessors/${participator.assessorId}/remove" class="close-btn" data-target="#assessor-remove" data-toggle="modal">${participator.assessorName}</a></td>
                                                  </c:otherwise>
                                                </c:choose>
                                              </c:if>
                                            </c:when>
                                          </c:choose>
                                        
                                          <c:choose>
                                            <c:when test="${empty participator.delegateId}">
                                              <td><a href="${ctx.host}/sessions/${session.id}/schedulings/relation/delegates/add?subSession=B&subGroup=${group.key}&assessorId=${participator.assessorId}&seat=${participator.delegateSeat}" class="add-btn" data-target="#delegate-add" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span></a></td>
                                            </c:when>
                                            <c:otherwise>
                                              <td>
                                                <a href="${ctx.host}/sessions/${session.id}/schedulings/relation/delegates/${participator.delegateId}/remove" class="close-btn" data-target="#delegate-remove" data-toggle="modal">${participator.delegateName}</a>
                                                <span style="position: absolute; top: 0; right: 0; width: 20px; height: 10px;" class="label-${persist.getKnowingRelation(session, participator.assessorId, participator.delegateId).knowingLevel.css}"></span>
                                              </td>
                                            </c:otherwise>
                                          </c:choose>
                                        </tr>
                                      </c:forEach>
                                      
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                          </c:forEach>
                        </div>
                      </div>
                    </div>
                  </c:if>
                </div>
              </div>
              
            </div>
          </c:if>
          
          
          
          <c:if test="${relationTask.status.finish}">
          
            <div class="tab-content" style="margin-top: 25px;">

              <div class="col-xs-12 form-horizontal ihg-form" style="padding: 0px;">
              
                <div class="row form-horizontal ihg-form" style="padding: 0px;">
                  <div class="col-xs-${not empty subSessionB ? '6' : '12'}">
                
                    <div class="panel panel-default ihg-panel">
                      <div class="panel-heading">
                        <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;Sub Session A</span>
                      </div>
                      <div class="panel-body" style="padding: 15px 0;">
                        <c:forEach var="group" items="${subSessionA}">
                          <div class="col-xs-6">
                            <div class="panel panel-default ihg-panel">
                              <div class="panel-heading">
                                <span class="panel-titles">GROUP ${group.key}</span>
                              </div>
                              <div class="panel-body session-setting-group" style="padding: 0px;">
                                <table class="table table-bordered ihg-table-table" style="margin-bottom: 0px; text-align: center;">
                                  <tbody>
                                    <c:forEach var="participator" items="${group.value}" varStatus="status">
                                      <tr>
                                      
                                        <c:set var="assessor" value="${persist.assessor(participator.assessorId)}" />
                                      
                                        <c:choose>
                                          <c:when test="${group.value.size() eq 4}">
                                            <c:if test="${status.index == 0 or status.index == 2}">
                                              <td rowspan="2" style="vertical-align: middle;">
                                                <div class="label-relation">
                                                  <span>${participator.assessorName}</span><br/>
                                                  <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                  <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                                </div>
                                              </td>
                                            </c:if>
                                          </c:when>
                                          <c:when test="${group.value.size() eq 2}">
                                            <td>
                                              <div class="label-relation">
                                                <span>${participator.assessorName}</span><br/>
                                                <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                              </div>
                                            </td>
                                          </c:when>
                                          <c:when test="${group.value.size() eq 3}">
                                            <c:if test="${status.count == 1}">
                                              <td rowspan="2" style="vertical-align: middle;">
                                                <div class="label-relation">
                                                  <span>${participator.assessorName}</span><br/>
                                                  <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                  <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                                </div>
                                              </td>
                                            </c:if>
                                            
                                            <c:if test="${status.count == 3}">
                                              <td>
                                                <div class="label-relation">
                                                  <span>${participator.assessorName}</span><br/>
                                                  <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                  <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                                </div>
                                              </td>
                                            </c:if>
                                          </c:when>
                                        </c:choose>
                                        
                                        <td>
                                          <div class="label-relation">${participator.delegateName}</div>
                                          <span style="position: absolute; top: 0; right: 0; width: 20px; height: 10px;" class="label-${persist.getKnowingRelation(session, participator.assessorId, participator.delegateId).knowingLevel.css}"></span>
                                        </td>
                                      </tr>
                                    </c:forEach>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </c:forEach>
                      </div>
                    </div>
                  </div>
                  
                  <c:if test="${not empty subSessionB}">
                    <div class="col-xs-6">
                      <div class="panel panel-default ihg-panel">
                        <div class="panel-heading">
                          <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;Sub Session B</span>
                        </div>
                        <div class="panel-body session-setting-group" style="padding: 15px 0;">
                          <c:forEach var="group" items="${subSessionB}">
                            <div class="col-xs-6">
                              <div class="panel panel-default ihg-panel">
                                <div class="panel-heading">
                                  <span class="panel-titles">GROUP ${group.key}</span>
                                </div>
                                <div class="panel-body session-setting-group" style="padding: 0px;">
                                  <table class="table table-bordered ihg-table-table" style="margin-bottom: 0px; text-align: center;">
                                    <tbody>
                                      <c:forEach var="participator" items="${group.value}" varStatus="status">
                                        <tr>
                                        
                                          <c:set var="assessor" value="${persist.assessor(participator.assessorId)}" />
                                        
                                          <c:choose>
                                            <c:when test="${group.value.size() eq 4}">
                                              <c:if test="${status.index == 0 or status.index == 2}">
                                                <td rowspan="2" style="vertical-align: middle;">
                                                  <div class="label-relation">
                                                    <span>${participator.assessorName}</span><br/>
                                                    <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                    <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                                  </div>
                                                </td>
                                              </c:if>
                                            </c:when>
                                            <c:when test="${group.value.size() eq 2}">
                                              <td>
                                                <div class="label-relation">
                                                  <span>${participator.assessorName}</span><br/>
                                                  <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                  <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                                </div>
                                              </td>
                                            </c:when>
                                            <c:when test="${group.value.size() eq 3}">
                                              <c:if test="${status.count == 1}">
                                                <td rowspan="2" style="vertical-align: middle;">
                                                  <div class="label-relation">
                                                    <span>${participator.assessorName}</span><br/>
                                                    <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                    <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                                  </div>
                                                </td>
                                              </c:if>
                                              
                                              <c:if test="${status.count == 3}">
                                                <td>
                                                  <div class="label-relation">
                                                    <span>${participator.assessorName}</span><br/>
                                                    <span style="font-size: 12px;">ZOOM&nbsp;:&nbsp;${assessor.zoomRoom.name}</span><br/>
                                                    <span style="font-size: 12px;">BizConf&nbsp;:&nbsp;${assessor.bizconfRoom.name}</span>
                                                  </div>
                                                </td>
                                              </c:if>
                                            </c:when>
                                          </c:choose>
                                          
                                          <td>
                                            <a href="" class="close-btn">${participator.delegateName}</a>
                                            <span style="position: absolute; top: 0; right: 0; width: 20px; height: 10px;" class="label-${persist.getKnowingRelation(session, participator.assessorId, participator.delegateId).knowingLevel.css}"></span>
                                          </td>
                                        </tr>
                                      </c:forEach>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                          </c:forEach>
                        </div>
                      </div>
                    </div>
                  </c:if>
                </div>
              </div>
              
            </div>
            
          </c:if>
          
          
        </div>
      </div>
    </div>
  </div>

  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/session/preparation/session-scheduling-list.js" />
  <script type="text/javascript">
    require([ 'page/session/preparation/session-scheduling-list' ], function (
        page ) {
      page.init();
    })
  </script>


</body>

</html>

